<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 遍历分类 -->
			<view class="" v-for="(part, partIndex) in paperInfo.scoreGroupList" :key="partIndex">
				<view class="">
					<view class="title">{{part.description}}</view>	
					<!-- 遍历问题 -->
					<view class="question-section" v-for="(question, index) in part.scoreQuestionList"
						:key="index">
						<view class="question">
							<text>{{question.description}}</text>
						</view>
						<view class="question question-score">
							<view class="w20">
								<text>满分：{{question.scoreDefault}}</text>
							</view>
							<view class="input" v-if="status <= 2">
								扣分：<u-input type="digit" class="form-control" border v-model="question.score" placeholder="扣分" />
							</view>
							<view class="input" v-else>
								<text>扣分：{{ question.score }}</text>
							</view>
							<view class="" v-if="!!question.remark">
								<view class="rotate-bar" :class="{'rotate': showLi[partIndex][index]}">
									<view class="my-add-btn">
										<u-icon name="arrow-right" size="36" @click="toggle(partIndex, index)" />
									</view>
								</view>
							</view>
						</view>
						<view class="ul" :class="{'hover': showLi[partIndex][index]}" :style="{'--height':height}">
							评分要点：{{ question.remark }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="">
				<input type="text" class="form-control" v-model="members" placeholder="同组人员姓名" />
			</view>
			
			<button @click="submit" type="primary" class="btn btn-primary btn-sm m-btn" v-if="status <= 2" :disabled="disabled">{{buttonText}}</button>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				evaluateId: '',
				companyId: '',
				recordFormId: '',
				members: '', // 同组人员姓名
				status: 99,
				evaluateInfo:{},
				paperInfo: {},
				disabled: false,
				action: this.Api + `/upload/uploadPic`,
				act: '',
				buttonText: '提交',
				
				// showLi: false, // 是否显示li
				showLi: [[]], // 是否显示li
				height: '200rpx' // ul的高度
			}
		},
		computed: {
		},
		onLoad(options) {
			this.initPage(options)
		},
		rules: {
			
		},
		methods: {
			toggle(index1,index2){
				this.showLi[index1][index2] = !this.showLi[index1][index2]
				this.$set(this.showLi, index1, this.showLi[index1])
			},
			initPage(options = {}) {
				if(!this.$util.getToken()){
					this.$util.toLogin(()=>this.initPage())
				}
				
				if (!options.evaluateId){
					console.log('未传入评价ID！');
					return false;
				}
				if(options.evaluateId) this.evaluateId = options.evaluateId;
				
				if(!this.$util.getToken()){
					this.$util.toLogin(()=>this.initPage())
				}
				let tokenStr = this.$util.getToken() ? 'Bearer ' + this.$util.getToken() : '';
				this.uploadHeader = {
					'Authorization': tokenStr
				}
				
				this.getInfo();
			},
			getInfo() {
				let data = {
					id: this.evaluateId,
					expertIds: vk.getVuex('$user.userInfo.userId')
				}
				this.$util.request(this.$api.EvaluateInfo, data, 'GET', null, null, null, null, () => this.getInfo())
					.then(res => {
						console.log('获取评分详情', res);
						
						if(res.data.status){
							this.status = parseInt(res.data.status);
						}
						this.paperInfo = res.data.form;
						this.evaluateInfo = res.data;
						if(res.data.recordForm){
							this.recordFormId = res.data.recordForm.id;
							this.buttonText = '提交修改';
						}
						
						this.members = res.data.members;
						this.showLi = [];
						let show2 = [];
						this.paperInfo.scoreGroupList.forEach((part, partIndex) => {
							show2 = [];
							console.log(part)
							part.scoreQuestionList.forEach((question, index) => {
								show2.push(false)
							})
							this.showLi.push(show2)
						})
						
						console.log("this.showLi", this.showLi)
						
						uni.setNavigationBarTitle({
							title: this.paperInfo.title
						})
					})
			},
			submit() {
				this.disabled = true;

				let submitQuestionList = [];
				let i = 0;
				this.paperInfo.scoreGroupList.forEach((top) => {
					if(top.children){  //有二级分类
						top.children.forEach((second) => {
							second.scoreQuestionList.forEach((question) => {
								// 没扣分的不传后台
								if (question.score) {
									question.questionId = question.id;
									if (question.imgUrls) {
										question.imageUrl = '';
										question.imgUrls.forEach((item) => question.imageUrl += item +
											',')
									}
									if (question.imageUrl) {
										question.imageUrl = question.imageUrl.substr(0, question
											.imageUrl.length - 1);
									}
									// 2021.11.6 将group放入对象，用于在下一页填写扣分说明时显示
									question.groupDescription = second.description
									submitQuestionList[i++] = question;
								}
							})
						})
					}else{  //无二级分类
						top.scoreQuestionList.forEach((question) => {
							// 没扣分的不传后台
							if (question.score) {
								question.questionId = question.id;
								if (question.imgUrls) {
									question.imageUrl = '';
									question.imgUrls.forEach((item) => question.imageUrl += item +
										',')
								}
								if (question.imageUrl) {
									question.imageUrl = question.imageUrl.substr(0, question
										.imageUrl.length - 1);
								}
								// 2021.11.6 将group放入对象，用于在下一页填写扣分说明时显示
								question.groupDescription = top.description
								submitQuestionList[i++] = question;
							}
						})
					}					
				})
				
				let data = {
					id: this.recordFormId,
					evaluateId: this.evaluateInfo.id,
					companyId: this.evaluateInfo.companyId,
					year: this.evaluateInfo.year,
					formId: this.evaluateInfo.formId,
					recordFormId: this.recordFormId,
					members: this.members,
					expertId: vk.getVuex('$user.userInfo.userId'),
					createBy: vk.getVuex('$user.userInfo.nickName'),
					scoreRecordList: submitQuestionList
				}
				console.log('保存data', data)
				
				// 如果扣分了，跳转到“扣分说明”页面，补充扣分说明
				if(submitQuestionList){
					uni.hideLoading();
					this.disabled = false;
					uni.navigateTo({
						url: '/pages/score/scoreRemark?saveData=' + encodeURIComponent(JSON.stringify(data))
					})
					return false;
				}
				
				// 没扣分则提交
				let method = this.recordFormId ? 'PUT' : 'POST';
				
				this.$util.request(this.$api.RecordFormRestful, data, method, null, null, null, null, () => this.submit())
					.then(res => {
						console.log('submitForm', res)
						if (res.code === 200) {
							vk.toast("保存成功", "success", 1000, true, () => {
								const eventChannel = this.getOpenerEventChannel();
								if (eventChannel.emit) eventChannel.emit('refresh');
								vk.navigateBack();
							});
						} else {
							console.log('保存失败', res)
							this.disabled = false;
							this.loading = false;
							vk.alert(res.msg, '保存失败');
						}
					}).catch((err) => {
						console.log('保存异常', err)
						this.disabled = false;
						this.loading = false;
						vk.alert(JSON.stringify(err), '保存异常');
					})
			},
			// 上传图片成功
			uploadSuccess(res) {
				// uni.hideLoading();
				var _res = JSON.parse(res.data);
				if (_res.code == 1) {
					uni.showToast({
						title: '照片上传成功！',
						duration: 3000
					});
					return {
						success: true,
						url: this.imageLookAction + _res.data
					}
				} else {
					uni.showToast({
						title: '照片上传失败！错误信息如下：' + res,
						icon: 'error',
						duration: 3000
					});
					return {
						success: false,
						url: ''
					}
				}
			},
			uploadFail(res) {
				uni.showToast({
					title: '照片上传失败！异常信息如下：' + res,
					icon: 'error',
					duration: 3000
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url("/static/css/main.css");

	.page {
		height: 100vh;
		background-color: #fff;
	}

	.title {
		padding: 10rpx 20rpx;
		background: #1b6fb7;
		color: #ffffff;
	}

	.lan {
		padding: 10rpx 20rpx;
		background: #edf6fb;
	}

	.question-section {
		padding: 10rpx 0;
		background: #fff;
	}
	
	.question-section:nth-child(2n+1) {
		background: #edf6fb;
	}
	
	.question-score {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.question {
		padding: 10rpx 20rpx;
	}

	.input {
		display: flex;
		// flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding-right: 20rpx;
	}

	.m-btn {
		margin-top: 30upx;
		margin-bottom: 20upx;
		width: 100%;
		height: 40px;
		font-size: 18px;
		background-color: #ea8834;
		border-color: #d27a2e;
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;
	}

	.image-Item {
		width: 160upx;
		height: 160upx;
		margin: 16upx;
		border-radius: 6upx;
	}
	
		.my-add-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40rpx;
			height: 40rpx;
			// background-color: green;
			// color: #fff;
			// border-radius: 50%;
			// box-shadow: 0 0 8px 0 #aaa;
		}
		.rotate-bar{
			transition: .5s transform;
			z-index: 99;
		}
		.rotate{
			transform: rotate(90deg);
			transition: .5s transform;
		}
		.ul{
			padding: 0 20rpx;
			width: 100%;
			height: 0;
			overflow: hidden;
			z-index: 98;
			transition: .5s height;
		}
		.ul.hover{
			height: 200rpx;
			// height: var(--height);
			transition: .5s height;
		}
		.li{
			margin-top:40rpx;
			width: 100rpx;
			height: 40rpx;
			color: green;
			text-align: center;
		}
		.li:first-child{
			margin-top:50rpx;
		}
</style>
